<template>
  <div class="app-container">
    <div>
      <el-row>
        <el-col :span="1.5" >
          <el-button
              type="primary"
              size="mini"
              @click="add()"
            >新增</el-button>
        </el-col>
        <el-col :span="1.5" >
          <el-button
              type="danger"
              size="mini"
            >删除</el-button>
        </el-col>
      </el-row>
    </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="课程名" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.courseTeacherVo.course.courseName }}
          </template>
        </el-table-column>
        <el-table-column label="教师名称" width="110" align="center">
          <template slot-scope="scope" >
            <span >{{scope.row.courseTeacherVo.teacher.username}}</span>
          </template>
        </el-table-column>
        <el-table-column label="课程学期" width="200" align="center">
          <template slot-scope="scope" >
            <span >{{scope.row.courseTeacherVo.term}}</span>
          </template>
        </el-table-column>
        <el-table-column label="选课分数" width="110" align="center">
          <template slot-scope="scope" >
            <span >{{scope.row.grade}}</span>
          </template>
        </el-table-column>
      </el-table>
    
    <el-pagination @size-change= "handleSizeChange" @current-change= "handleCurrentChange" :current-page= "PageSet.pageNum"
        :page-sizes="[10, 30, 50, 100]" :page-size="PageSet.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="PageSet.total">
    </el-pagination>



  </div>
</template>

<script>
import { getList} from '@/api/student/'

export default {

  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      PageSet: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页显示的行数
        total: 100
      },
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleSizeChange: function(size) {
      this.PageSet.pageSize = size
      this.fetchData()
    },
    handleCurrentChange: function(pageNum) {
      this.PageSet.pageNum = pageNum
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getList(this.PageSet, this.$store.state.user.userId).then(response => {
        this.PageSet.total = response.data.items.total
        this.list = response.data.items.list[0].courseStudentVoList
        this.listLoading = false 
      })
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该课程,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(function() {
        return deleteCourse(id);
      }).then(() => {
        this.fetchData();
        this.$message({
          type: 'success',
          message: '删除成功!'
      }); 
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

  }
}
</script>
